  <template>
    <div class="" >
      <div class="row">
        <div class="col-sm-3 control-label" style="margin-bottom: 10px;">{{item.label}}</div>
        <div class="col-sm-9" style="margin-bottom: 10px;">
          <div class="input-daterange input-group" :id="item.label" style="width: 100%;">
            <input type="text" class="input-sm form-control" :name="item.name1" id="startCtrl" />
            <span class="input-group-addon">至</span>
            <input type="text" class="input-sm form-control" :name="item.name2" id="endCtrl"/>
          </div>
        </div>
      </div>
    </div>
  </template>

<script>
  import { SET_DATEPARAMS,SET_DATEPICK } from 'src/store/mutation-types.js';

  export default {
      props:["item"],
      data(){
        return{
          datePick:{}
        }
      },
      created(){
        this.$nextTick(() => {
          let item  = this.item;
          let option = {
            minViewMode:1,
            format: "yyyy-mm",
            language:"zh-CN",
            clearBtn: true,
          };
          if(item.type==2){
            option.minViewMode=2,
            option.format="yyyy"
          }
          $(`#${item.label}`).datepicker(option);
          $("#startCtrl").on('changeDate',(e)=>{
            if(e.date){
              let startTime = e.format(e.dates,option.format);
              let obj={}
              obj[`${item.name1}`] = startTime;
              self.$store.commit(SET_DATEPICK, obj);
            }else{
              let obj={}
              obj[`${item.name1}`] = undefined;
              self.$store.commit(SET_DATEPICK, obj);
            }
          })
          $('#endCtrl').datepicker({
            autoclose: true,
            format: "yyyy-mm",
            minViewMode:1,
            language:"zh-CN",
            clearBtn: true
          }).on('changeDate',function(e){
            if(e.date){
              let endTime = e.format(e.dates,option.format);
              let obj={};
              obj[`${item.name2}`] = endTime;
              self.$store.commit(SET_DATEPICK, obj);
            }
            else{
                let obj={}
                obj[`${item.name2}`] = undefined;
                self.$store.commit(SET_DATEPICK, obj);
              }
          });
        });

      }
    }
</script>

<style scoped>

</style>
